<template>
    <div class="showBox" >
      <div class="img-box_img2">
        <!-- <div :key="index" v-for="(item, index) in dev">
          <span :style="'position: absolute;border:1px solid rgb(108, 163, 37); left:'+item.left+'px;top:'+item.top+'px;'">  {{ item.val }} </span>
        </div> -->
        <div class="no-print" style="text-align: right">
            <a-button v-print="'#printContent'" ghost type="primary">打印</a-button>
        </div>
        <section ref="print" id="printContent"> 

          <div  v-for="(row,index) in Object.keys(row_data)" :key="index" >        
            
            <template v-for="(col,colIndex) in row_data[row].cells"> 
                <template v-if="col.text != ' '">
                 
                  <template v-if="col.text.indexOf('serialNum') > 0 ">        
                    <span :style="'position: relative;left:'+cell_width[colIndex]+'px;top:'+rows_height[row]+'px;'">                     
                      {{printBillData.serialNum}}
                    </span>
                 </template>
                 <template v-else-if="col.text.indexOf('printData') > 0 ">        
                    <span :style="'position: relative;left:'+cell_width[colIndex]+'px;top:'+rows_height[row]+'px;'">                     
                      {{printBillData.printData}}
                    </span>
                 </template>  
                 <template v-else-if="col.text.indexOf('billCode') > 0 ">        
                    <span :style="'position: relative;left:'+cell_width[colIndex]+'px;top:'+rows_height[row]+'px;'">                     
                      {{printBillData.billCode}}
                    </span>
                 </template>  
                 <template v-else-if="col.text.indexOf('cusCode') > 0 ">        
                    <span :style="'position: relative;left:'+cell_width[colIndex]+'px;top:'+rows_height[row]+'px;'">                     
                      {{printBillData.cusCode}}
                    </span>
                 </template>  
                 <template v-else-if="col.text.indexOf('cusName') > 0 ">        
                    <span :style="'position: relative;left:'+cell_width[colIndex]+'px;top:'+rows_height[row]+'px;'">                     
                      {{printBillData.cusName}}
                    </span>
                 </template>  
                 <template v-else-if="col.text.indexOf('cusAddr') > 0 ">        
                    <span :style="'position: relative;left:'+cell_width[colIndex]+'px;top:'+rows_height[row]+'px;'">                     
                      {{printBillData.cusAddr}}
                    </span>
                 </template>  
                 <template v-else-if="col.text.indexOf('cusPhone') > 0 ">        
                    <span :style="'position: relative;left:'+cell_width[colIndex]+'px;top:'+rows_height[row]+'px;'">                     
                      {{printBillData.cusPhone}}
                    </span>
                 </template>  
                 <template v-else-if="col.text.indexOf('balance') > 0 ">        
                    <span :style="'position: relative;left:'+cell_width[colIndex]+'px;top:'+rows_height[row]+'px;'">                     
                      {{printBillData.balance}}
                    </span>
                 </template>  
                 <template v-else-if="col.text.indexOf('moneyCn') > 0 ">        
                    <span :style="'position: relative;left:'+cell_width[colIndex]+'px;top:'+rows_height[row]+'px;'">                     
                      {{printBillData.moneyCn}}
                    </span>
                 </template>  
                 <template v-else-if="col.text.indexOf('cashier') > 0 ">        
                    <span :style="'position: relative;left:'+cell_width[colIndex]+'px;top:'+rows_height[row]+'px;'">                     
                      {{printBillData.cashier}}
                    </span>
                 </template>  
                 <template v-else-if="col.text.indexOf('isNew') > 0 ">        
                    <span :style="'position: relative;left:'+cell_width[colIndex]+'px;top:'+rows_height[row]+'px;'">                     
                      {{printBillData.printData}}
                    </span>
                 </template>  
                 <template v-else-if="(col.text.indexOf('用户编号') > 0 || col.text.indexOf('上次抄表') > 0
                    || col.text.indexOf('本次抄数') > 0  || col.text.indexOf('抄表月份') > 0 || col.text.indexOf('水量') > 0 
                    || col.text.indexOf('水费') > 0 || col.text.indexOf('违约金') > 0 || col.text.indexOf('其他费用') > 0 
                    || col.text.indexOf('费用金额') > 0)">        
                    <span :style="'position: relative;left:'+cell_width[colIndex]+'px;top:'+rows_height[row]+'px;'">                     
                      {{col.text}}
                    </span>
                 </template>  

                </template> 
            </template> 
            <!--
                  {{row}} -  {{index}} - {{row_data[row].cells.length}}
               <template v-for="(col,colIndex) in Object.keys(row_data[row].cells)">   

              
                <template :style="'position: absolute;left:'+coll_width[colIndex]+'px;top:'+rows_height[index]+'px;'">
                  AAA
                </template>
            </template>   -->
               <!--
                 <span :style="'position: absolute;left:100px;top:'+(290 + (colIndex+1)* rowHeight )+'px;'">  {{val.cusCode}} </span>
                  <div
                v-if="
                rowIndex >= parseInt(`${(scrollTop-rowHeight) / rowHeight}`) &&
                  (parseInt(`${scrollTop / rowHeight}`) + 9) > rowIndex
              "
                :id="`${caseId}tbody-tr-${rowIndex}`"
                :data-idx="rowIndex"
                class="tr"
                :class="selectedRowIds.indexOf(row.id) !== -1 ? 'tr-checked' : ''"
                :style="buildTrStyle(colIndex)"
                :key="col.id"
                @click="handleClickTableRow"
              >
               </div> -->
   

          </div>
          


         <!-- <div style="font-size:18px;font-weight:600"  v-for="(val,index) in printBillData.fees" :key="index" >
            <span :style="'position: absolute;left:100px;top:'+(290 + (index+1)* rowHeight )+'px;'">  {{val.cusCode}} </span>
            <span :style="'position: absolute;left:190px;top:'+(290 + (index+1)* rowHeight ) +'px;'">   {{val.beginScale}}  </span>       
            <span :style="'position: absolute;left:290px;top:'+(290 + (index+1)* rowHeight ) +'px;'">  {{val.endScale}} </span>       
            <span :style="'position: absolute;left:390px;top:'+(290 + (index+1)* rowHeight ) +'px;'">   {{val.readMonth}}  </span>       
            <span :style="'position: absolute;left:390px;top:'+(290 + (index+1)* rowHeight ) +'px;'">   {{val.amount}}  </span>       
            <span :style="'position: absolute;left:490px;top:'+(290 + (index+1)* rowHeight ) +'px;'">   {{val.totalMoney}}  </span>       
            <span :style="'position: absolute;left:590px;top:'+(290 + (index+1)* rowHeight ) +'px;'">   {{val.alienMoney}}  </span>       
            <span :style="'position: absolute;left:690px;top:'+(290 + (index+1)* rowHeight ) +'px;'">   {{val.penalty}}  </span> 
            <span :style="'position: absolute;left:890px;top:'+(290 + (index+1)* rowHeight ) +'px;'">   {{val.money}}  </span>       
          </div>  -->
          
        </section>

      </div>
    </div> 

  <!--</page-layout>-->
</template>
<script>
  import ACol from "ant-design-vue/es/grid/Col";
  import ARow from "ant-design-vue/es/grid/Row";
  import ATextarea from 'ant-design-vue/es/input/TextArea';
  import { getAction} from '@/api/manage'

  export default {
    components: {
      ATextarea,
      ARow,
      ACol,
    },
    name: 'Printgzsld',
    props: ["printBillData"],   
    data(){
      return {
        columns: [{
        }
        ],
        labelCol: {
          xs: { span: 24 },
          sm: { span: 2 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        rowHeight: 30,
        previewImage: '',
        col_width: [],
        coll_width: [],
        row_height: [],
        rows_height: [],
        mergeLenObj:{},
        row_data: {},
       
        url:{
          loadApplicant:"/sps/register/loadApplicants",
          loadPrintModelUrl:"/bv/bvVouchers/getPrintModel",
        }
      }
    },
    created() {
      // this.loadData();
      this.getPrintConfigDate();
      // console.log("printBillData-form",this.printBillData)
    },
    methods: {
      loadData(data){       
        //let data={"loopBlockList":[],"area":{"sri":16,"sci":9,"eri":16,"eci":9,"width":65,"height":25},"excel_config_id":"668402164624896000","printConfig":{"paper":"A5纸","width":148,"height":210,"definition":1,"isBackend":true,"marginX":10,"marginY":10,"layout":"landscape"},"zonedEditionList":[],"rows":{"0":{"cells":{"0":{"style":2,"virtual":"RJTv9bFgSy3YB7qR","text":" "},"1":{"style":2,"virtual":"RJTv9bFgSy3YB7qR","text":" "},"2":{"style":2,"virtual":"RJTv9bFgSy3YB7qR","text":" "},"3":{"style":2,"virtual":"RJTv9bFgSy3YB7qR","text":" "},"4":{"style":2,"virtual":"RJTv9bFgSy3YB7qR","text":" "},"5":{"style":2,"virtual":"RJTv9bFgSy3YB7qR","text":" "},"6":{"style":2,"virtual":"RJTv9bFgSy3YB7qR","text":" "},"7":{"style":2,"virtual":"RJTv9bFgSy3YB7qR","text":" "},"8":{"style":2,"virtual":"RJTv9bFgSy3YB7qR","text":" "},"9":{"style":2,"virtual":"RJTv9bFgSy3YB7qR","text":" "},"10":{"style":2,"virtual":"RJTv9bFgSy3YB7qR","text":" "},"11":{"text":" ","virtual":"RJTv9bFgSy3YB7qR"}},"height":45},"1":{"cells":{"0":{"style":2,"text":" "},"1":{"style":2,"text":" "},"2":{"style":2,"text":"#{bill_print_receipt.serialNum} ","merge":[0,1],"height":29},"4":{"style":2,"text":" "},"5":{"style":2,"text":" #{bill_print_receipt.paymentId}","merge":[0,1],"height":29},"7":{"style":2,"text":" "},"8":{"style":2,"text":" #{bill_print_receipt.billCode}","merge":[0,1],"height":29},"10":{"style":2,"text":" "}},"height":29},"2":{"cells":{"0":{"style":2,"text":" "},"1":{"style":2,"text":" "},"2":{"text":"#{bill_print_receipt.cusCode}","style":2,"merge":[0,1],"height":26},"3":{"style":3,"text":" "},"4":{"style":2,"text":" "},"5":{"style":2},"6":{"style":2,"text":" #{bill_print_receipt.cusName}","merge":[0,3],"height":26},"10":{"style":2,"text":" "}},"height":26},"3":{"cells":{"0":{"style":2,"text":" "},"1":{"style":2,"text":" "},"2":{"style":2,"merge":[0,4],"height":22,"text":"#{bill_print_receipt.cusAddr}"},"7":{"style":3},"8":{"style":2,"text":"#{bill_print_receipt.cusPhone}","merge":[0,1],"height":22},"10":{"style":2,"text":" "},"14":{"text":""}},"height":22},"4":{"cells":{"0":{"style":2,"text":" "},"1":{"style":2,"text":"用户编号"},"2":{"style":2,"text":"上次抄数"},"3":{"style":2,"text":"本次抄数"},"4":{"style":2,"merge":[0,1],"height":25,"text":"抄表月份"},"5":{"style":10},"6":{"style":2,"text":"水量"},"7":{"style":2,"text":"水费"},"8":{"style":2,"text":"违约金"},"9":{"style":2,"text":"其他费用"},"10":{"style":2,"text":"费用金额"}},"height":28},"5":{"cells":{"0":{"style":2,"text":" "},"1":{"style":2,"text":"#{bill_print_receipt.fees_cusCode}"},"2":{"style":2,"text":"#{bill_print_receipt.fees_endScale}"},"3":{"style":2,"text":"#{bill_print_receipt.fees_endScale}"},"4":{"style":2,"text":"#{bill_print_receipt.fees_beginScale}","merge":[0,1],"height":25},"6":{"style":2,"text":"#{bill_print_receipt.fees_amount}"},"7":{"style":2,"text":"#{bill_print_receipt.fees_totalMoney}"},"8":{"style":2,"text":"#{bill_print_receipt.fees_alienMoney}"},"9":{"style":2,"text":"#{bill_print_receipt.fees_penalty}"},"10":{"style":4,"text":"#{bill_print_receipt.fees_money}"}},"height":25},"6":{"cells":{"0":{"style":2,"text":" "},"4":{"merge":[0,1],"height":30},"10":{"style":2,"text":" "}},"height":30},"7":{"cells":{"0":{"style":2,"text":" "},"1":{"style":2,"text":" "},"2":{"style":2,"text":" "},"3":{"style":2,"text":" "},"4":{"merge":[0,1],"height":25},"6":{"style":2,"text":" "},"7":{"style":2,"text":" "},"8":{"style":2,"text":" "},"9":{"style":2,"text":" "},"10":{"style":2,"text":" "}}},"8":{"cells":{"0":{"style":2,"text":" "},"1":{"style":2,"text":" "},"2":{"style":2,"text":" "},"3":{"style":2,"text":" "},"4":{"style":2,"text":" "},"5":{"style":2,"text":" "},"6":{"style":2,"text":" "},"7":{"style":2,"text":"#{bill_print_receipt.balance}","merge":[0,1],"height":25},"8":{"style":3,"text":" "},"9":{"style":2,"text":" "},"10":{"style":2,"text":" "}}},"9":{"cells":{"0":{"style":2,"text":" "},"1":{"style":2,"text":" "},"2":{"style":2,"text":" "},"3":{"style":2,"text":"#{bill_print_receipt.moneyCn}","merge":[0,2],"height":25},"4":{"style":3,"text":" "},"5":{"style":3,"text":" "},"6":{"style":2,"text":" "},"8":{"style":2,"text":"#{bill_print_receipt.moneyFee}"},"10":{"style":3,"text":" "}},"height":29},"10":{"cells":{"0":{"style":2,"text":" "},"1":{"style":2,"text":" "},"2":{"style":2,"text":" "},"6":{"style":2,"text":" "},"7":{"style":2,"text":" "},"10":{"style":2,"text":" "}},"height":14},"11":{"cells":{"0":{"style":2,"text":" "},"1":{"style":2,"text":" "},"2":{"style":2,"merge":[0,1],"height":25,"text":"#{bill_print_receipt.cashier}"},"3":{"style":3,"text":" "},"4":{"style":2,"text":" "},"5":{"style":2,"text":" "},"6":{"style":2,"text":" "},"7":{"style":2,"text":" "},"8":{"style":2,"text":"#{bill_print_receipt.printData}","merge":[0,1],"height":25},"9":{"style":3,"text":" "},"10":{"style":2,"text":" "}}},"12":{"cells":{"0":{"style":2,"text":" "},"1":{"style":2,"text":" "},"4":{"style":2,"text":" "},"5":{"style":2,"text":" "},"6":{"style":2,"text":" "},"7":{"style":2,"text":" "},"10":{"style":2,"text":" "}}},"13":{"cells":{"0":{"style":1,"text":" "},"1":{"style":1,"text":" "},"2":{"merge":[0,1],"height":25,"style":1,"text":" "},"3":{"style":1,"text":" "},"4":{"style":1,"text":" "},"5":{"style":1,"text":" "},"6":{"style":1,"text":" "},"7":{"style":1,"merge":[0,1],"height":25,"text":" "},"9":{"style":1,"text":" "},"10":{"style":1,"text":" "}}},"len":100},"dbexps":[],"dicts":[],"rpbar":{"show":true,"pageSize":"","btnList":[]},"freeze":"A1","dataRectWidth":690,"displayConfig":{},"background":false,"name":"sheet1","autofilter":{},"styles":[{"font":{"bold":true}},{"font":{"bold":true},"color":"#fe0000"},{"font":{"bold":true,"size":14},"color":"#fe0000"},{"font":{"size":14}},{"font":{"bold":true,"size":14},"color":"#fe0000","format":"number"},{"font":{"size":14},"color":"#fe0000"},{"font":{"bold":false,"size":14},"color":"#fe0000"},{"font":{"bold":false}},{"font":{"bold":true,"size":16},"color":"#fe0000"},{"font":{"bold":true,"size":16}},{"font":{"bold":true,"size":14}}],"validations":[],"cols":{"0":{"width":50},"1":{"width":65},"2":{"width":60},"3":{"width":60},"4":{"width":30},"5":{"width":33},"6":{"width":65},"7":{"width":75},"8":{"width":65},"9":{"width":65},"10":{"width":54},"11":{"width":68},"len":50},"merges":["C3:D3","C14:D14","H14:I14","C2:D2","F2:G2","I2:J2","C4:G4","G3:J3","E5:F5","E6:F6","E7:F7","E8:F8","D10:F10","H9:I9","I12:J12","C12:D12","I4:J4"],"imgList":[{"row":0,"col":0,"colspan":11,"rowspan":14,"width":"633.991","height":"343.996","src":"excel_online/feeBill1648472585023.png","isBackend":true,"commonBackend":true,"layer_id":"RJTv9bFgSy3YB7qR","offsetX":0,"offsetY":0,"virtualCellRange":[[0,0],[0,1],[0,2],[0,3],[0,4],[0,5],[0,6],[0,7],[0,8],[0,9],[0,10],[0,11]]}]};
        let cols=data.cols;
        let col_len=Object.keys(cols).length-1;
        //列宽
        this.col_width=[col_len];
        for(var i=0;i<col_len;i++){
          this.col_width[i]=cols[i].width;
        }
        let mergeArr= data.merges;
        //合并项数
        let mergeLenObj={};
        for(var i=0;i<mergeArr.length;i++){
          let m=mergeArr[i];
          let sa= m.split(":");   // C3:D3
          let stb=sa[0].substr(0,1); //C
          let stb2=sa[0].substr(1);  //3

          let ste=sa[1].substr(0,1); //D
          let ste2=sa[1].substr(1);  //3
          let ss=ste.charCodeAt(0)-stb.charCodeAt(0)+1;

          let s1= this.strConter(stb);
          let s2= stb2-1;
          let m_key=s2+"_"+s1;// 行_列
          mergeLenObj[m_key]=ss;
        }

        let row= data.rows;
        this.row_data=row;
        let row_len=Object.keys(row).length-1;
        this.row_height=[row_len];
        for(var i=0;i<row_len;i++){
          // let row_cell_cells=row[i].cells;
          this.row_height[i]=row[i].height;

          // let row_cell_len=Object.keys(row_cell_cells).length-1;
          // let row_cell_unit=[row_cell_len];
          // for(var j=0;j<row_cell_len;j++){
          //   if(row_cell_cells[j].text !=' '){
          //     let row_cell_style=row_cell_cells[j].style;
          //     let row_cell_text=row_cell_cells[j].text;
          //   }
          // }
        }

        //列宽
        this.cell_width=[col_len];
        let w=30;
        for(var i=0;i<this.col_width.length;i++){
          if(i== 0){
            this.cell_width[i]=w;  
          }else{
            w= w+ this.col_width[i];
            this.cell_width[i]=w;
          }
          
        }
        //行高
        this.rows_height=[row_len];
        let h=30+10;
        for(var i=0;i<this.row_height.length;i++){
          if(!this.row_height[i] ){
            h= h+ 25;
          }else{
             h= h+ this.row_height[i];
          }
          this.rows_height[i]=h;
        }
      },
      getPrintConfigDate(){
        //打印模板 
         //提交后台已打
          let param={
            dbCode: 'printBillData'
          }        
          getAction(this.url.loadPrintModelUrl, param).then((res) => {
            // debugger
            if (res.success) {
              if(res.result && res.result.length>0){
                let data=res.result[0];
                let jsonStr=eval ("(" + data.json_str + ")");
                this.loadData(jsonStr);
                // console.log("jsonStr:",jsonStr); 
              }
             
            }else{
              this.$message.warning(res.message) 
            }
          }).finally(() => {
            this.loading = false
          })

      },
      handleCancel () {
        this.previewVisible = false
      },
      strConter(a){
        let n=0;
        if(a === 'A'){
          n=0;
        }else if(a === 'B'){
          n=1;
        }else if(a === 'C'){
          n=2;
        }else if(a === 'D'){
          n=3;
        }else if(a === 'E'){
          n=4;
        }else if(a === 'F'){
          n=5;
        }else if(a === 'G'){
          n=6;
        }else if(a === 'H'){
          n=7;
        }else if(a === 'I'){
          n=8;
        }else if(a === 'J'){
          n=9;
        }else if(a === 'K'){
          n=10;
        }else if(a === 'L'){
          n=11;
        }else if(a === 'M'){
          n=12;
        }else if(a === 'N'){
          n=13;
        }else if(a === 'O'){
          n=14;
        }else if(a === 'P'){
          n=15;
        }else if(a === 'Q'){
          n=16;
        }
        return n;
      }, 
     
    }
  }
</script>
<style scoped>
  /*update_begin author:scott date:20191203 for:打印机打印的字体模糊问题 */
  * {
    color: #000000!important;
    -webkit-tap-highlight-color: #000000!important;
  }
  /*update_end author:scott date:20191203 for:打印机打印的字体模糊问题 */

  .explain{
    text-align: left;
    margin-left: 50px;
    color:#000000!important;
  }
  .explain .ant-input,.sign .ant-input{
    font-weight:bolder;
    text-align:center;
    border-left-width:0px!important;
    border-top-width:0px!important;
    border-right-width:0px!important;
  }
  .explain div{
    margin-bottom: 10px;
  }
  /* you can make up upload button and sample style by using stylesheets */
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
  .showBox{
    /* text-align:center;     */
    width:100%;
    height:750px;
  }
  .img-box_img2 {
    margin:0 auto;
    position: absolute;
    width:1100px;
    height:700px;  
    background-Size:contain;
    background-Position:center center;
    background: url('~@assets/feeBill.png') no-repeat center/contain; 
  }
</style>